<template>
  <div>
    <!-- 员工部门 --树形结构 -->
    <el-tree
      ref="deptTree"
      node-key="id"
      :data="depts"
      :props="{label:'name'}"
      default-expand-all
      :expand-on-click-node="false"
      highlight-current
      @current-change="selectNode"
    />
  </div>
</template>

<script>
import { getDepartmentsAPI } from '@/api/department'
import { transListToTreeData } from '@/utils'
export default {
  props: {
    // queryParams: {
    //   type: Object,
    //   default: null
    // }
  },
  data() {
    return {
      // 部门的数据列表
      depts: []
    }
  },
  created() {
  // 获取部门的数据列表
    this.getDepartmentList()
  },
  methods: {
    // 获取部门的数据列表
    async getDepartmentList() {
      // 获取部门的数据列表并转换成树形结构
      this.depts = transListToTreeData(await getDepartmentsAPI(), 0)
      console.log(this.depts)
      // 记录根节点的id
      // console.log(this.depts[0].id)
      this.$nextTick(() => {
        this.$refs.deptTree.setCurrentKey(this.depts[0].id)
      })
    },
    // 选中的节点发生变化时
    selectNode(node) {
      // console.log(node.id)
      // 页码值等于选中的id
      this.$emit('changId', node.id)
    }
  }

}
</script>

<style>

</style>
